<template>
    <div class="course-manager-box card-box" v-if="!roleStore.isStudent">
        <h5 class="card-title">
            <el-icon size="20" color="#FB8B24"><Operation /></el-icon>
            課程管理
        </h5>
        <div class="card-text">
            <el-menu default-active="1" :default-openeds="defaultOpeneds">
                <el-sub-menu index="1">
                    <template #title>
                        <span>課程管理</span>
                    </template>
                    <el-menu-item index="1-1" v-if="roleStore.isSuperAdmin">修改设定</el-menu-item>
                    <el-menu-item index="1-2" v-if="roleStore.isSuperAdmin">课程完成度</el-menu-item>
                    <el-menu-item index="1-3" v-if="roleStore.isSuperAdmin">CSV Enroll Students</el-menu-item>
                    <el-sub-menu index="1-4">
                        <template #title>
                            <span>用戶</span>
                        </template>
                        <el-menu-item index="1-1-1" v-if="roleStore.isTeacher">權限</el-menu-item>
                        <el-menu-item index="1-1-2" v-if="roleStore.isSuperAdmin">我要退选 master2425</el-menu-item>
                        <el-menu-item index="1-1-3" v-if="roleStore.isSuperAdmin">过滤</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="1-5">
                        <template #title>
                            <span>報表</span>
                        </template>
                        <el-menu-item index="1-1-1">能力細目</el-menu-item>
                        <el-menu-item index="1-1-2">日誌</el-menu-item>
                        <el-menu-item index="1-1-3">最新日誌</el-menu-item>
                        <el-menu-item index="1-1-4">活動報告</el-menu-item>
                        <el-menu-item index="1-1-5">課程參與</el-menu-item>
                        <el-menu-item index="1-1-6">活動完成</el-menu-item>
                        <el-menu-item index="1-1-7">統計</el-menu-item>
                        <el-menu-item index="1-1-8">Video Time</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="1-6" v-if="roleStore.isSuperAdmin">成绩簿设定</el-menu-item>
                    <el-menu-item index="1-7" v-if="roleStore.isSuperAdmin">备份</el-menu-item>
                    <el-menu-item index="1-8" v-if="roleStore.isSuperAdmin">还原</el-menu-item>
                    <el-menu-item index="1-9" v-if="roleStore.isSuperAdmin">导入</el-menu-item>
                    <el-menu-item index="1-10" v-if="roleStore.isSuperAdmin">复制课程</el-menu-item>
                    <el-menu-item index="1-11" v-if="roleStore.isSuperAdmin">存储</el-menu-item>
                    <el-sub-menu index="1-4" v-if="roleStore.isSuperAdmin">
                        <template #title>
                            <span>题库</span>
                        </template>
                        <el-menu-item index="1-4-1">試题</el-menu-item>
                        <el-menu-item index="1-4-2">試题分類</el-menu-item>
                        <el-menu-item index="1-4-3">匯入</el-menu-item>
                        <el-menu-item index="1-4-4">匯出</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
            </el-menu>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoleStore } from '@/stores/role'

const defaultOpeneds = ref(['1']) // 默认展开的菜单项
const roleStore = useRoleStore()
</script>

<style lang="less" scoped>
.course-manager-box {
    margin-top: 24px;

    .el-menu {
        --el-menu-bg-color: transparent; // 背景色
        --el-menu-hover-bg-color: transparent; // hover时的行背景色
        --el-menu-base-level-padding: 1px;
        --el-menu-level-padding: 12px; // 左右内边距
        --el-menu-item-font-size: 15px; // 字体大小
        --el-menu-item-height: 25px; // 一级导航行高
        --el-menu-sub-item-height: 25px; // 二级导航行高

        border-right: none;

        .el-sub-menu {
            :deep(.el-menu) {
                padding: 4px 0;
            }

            :deep(.el-sub-menu__title) {
                flex-direction: row-reverse;
                justify-content: flex-end;

                .el-sub-menu__icon-arrow {
                    margin-right: 6px;
                    margin-top: 0;
                    position: static;
                    transform: rotate(-90deg) !important;
                }
            }

            &.is-opened {
                & > :deep(.el-sub-menu__title) {
                    .el-sub-menu__icon-arrow {
                        transform: rotate(0) !important;
                    }
                }
            }
        }
    }
}
</style>
